<!DOCTYPE html>
<html lang="ZH-CN">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" href="Styles/s1.css">
</head>

<style>
	svg #svg_36 {
		animation: ani_36 1.5s alternate infinite forwards;
		translate: 5px 1px;
		transform-origin: center;
	}

	svg #svg_2 {
		animation: ani_2 1.5s alternate infinite forwards;
		transform-origin: center;

	}

	svg #svg_6 {
		animation: ani_6 1.5s alternate infinite forwards;
	}

	@keyframes ani_36 {
		from {
			fill: #f20000;
		}

		to {
			fill: #ff4949;
			transform: scale(1.1) rotate(-6deg) translate(-25px, -5px);
		}
	}

	@keyframes ani_2 {
		from {
			fill: red;
		}

		to {
			fill: #fc8585;
			transform: scale(1.1) rotate(8deg) translate(5px, -34px);
		}
	}

	@keyframes ani_6 {
		from {}

		to {
			translate: -5px -45px;
			fill: rgb(104, 219, 219)
		}
	}
</style>

<body>
	<div style="display: inline-block; border: 2px black solid ;">
		<svg width="250" height="220" xmlns="http://www.w3.org/2000/svg">
			<g transform="scale(0.5)">
				<path id="svg_36"
					d="m234.99999,181.09686c21.2332,-56.70245 104.42557,0 0,72.90314c-104.42557,-72.90314 -21.2332,-129.60559 0,-72.90314z"
					stroke="deepPink" fill="red" />
				<text fill="#FFAAB8" stroke="#000" x="135" y="310" id="svg_1" stroke-width="0" font-size="24"
					font-family="Noto Sans JP" text-anchor="start" xml:space="preserve" stroke-dasharray="5,5" font-style="normal"
					font-weight="bold">Hearhearhearheart</text>
				<path fill="red" id="svg_6"
					d="m274.34915,230.27646l-6.54183,4.95917l2.50068,-8.02195l-6.54036,-4.95917l8.08451,0.00154l2.1487,-6.8978l0.35051,-1.12031l2.49626,8.01658l8.08671,0l-6.5433,4.95917l2.50142,8.02426l-6.5433,-4.96147l0,0z" />
				<path stroke="deepPink" id="svg_2"
					d="m260.78947,217.89903c12.18441,-29.47035 59.92331,0 0,37.89045c-59.92331,-37.89045 -12.18441,-67.3608 0,-37.89045z"
					fill="red" />
			</g>
		</svg>
	</div>

</body>

</html>